<template>
    <el-dialog title="新增决策单元" :visible.sync="visible" width="976px" append-to-body :close-on-click-modal="false">
        <BasePage style="border: 0; box-shadow: none">
            <el-form slot="form" :inline="true" size="medium" label-width="78px" @submit.native.prevent>
                <el-form-item label="检测批次">
                    <el-date-picker
                        v-model="form.detectionBatch"
                        type="year"
                        format="yyyy年路网检测"
                        value-format="yyyy年路网检测"
                        :clearable="false"
                        placeholder="请选择"
                        :picker-options="datePickerOptions"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="公路">
                    <AssetsRoadSelect :value.sync="form.highwayCode" clearable placeholder="请选择" />
                </el-form-item>
                <el-form-item label="管养单位" style="margin-right: 0">
                    <CustodyOrgSelect :value.sync="form.orgName" :is-label="true" clearable></CustodyOrgSelect>
                </el-form-item>
                <el-form-item label="起点桩号">
                    <el-row class="filter-stake">
                        <el-col :span="12" class="start-stake">
                            <el-input
                                v-model="form.startStake1"
                                clearable
                                type="number"
                                oninput="if(value.length > 3) value = value.slice(0, 3)"
                                @keydown.native="onKeydown($event)"
                            >
                                <template slot="prepend">K</template>
                            </el-input>
                        </el-col>
                        <el-col :span="12" class="end-stake">
                            <el-input
                                v-model="form.startStake2"
                                clearable
                                type="number"
                                oninput="if(value.length > 3) value = value.slice(0, 3)"
                                @keydown.native="onKeydown($event)"
                            >
                                <template slot="prepend">+</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="终点桩号">
                    <el-row class="filter-stake">
                        <el-col :span="12" class="start-stake">
                            <el-input
                                v-model="form.endStake1"
                                clearable
                                type="number"
                                oninput="if(value.length > 3) value = value.slice(0, 3)"
                                @keydown.native="onKeydown($event)"
                            >
                                <template slot="prepend">K</template>
                            </el-input>
                        </el-col>
                        <el-col :span="12" class="end-stake">
                            <el-input
                                v-model="form.endStake2"
                                clearable
                                type="number"
                                oninput="if(value.length > 3) value = value.slice(0, 3)"
                                @keydown.native="onKeydown($event)"
                            >
                                <template slot="prepend">+</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="检测类型" style="margin-right: 0">
                    <el-select v-model="form.detectionType" placeholder="请选择" style="width: 100%" clearable>
                        <el-option v-for="item in TestTypeOptions" :key="item.value" :label="item.label" :value="item.label" />
                    </el-select>
                </el-form-item>
                <el-form-item label="方向">
                    <el-select v-model="form.direction" placeholder="请选择" clearable style="width: 100%">
                        <el-option v-for="d in DirectionOptions" :key="d.value" :label="d.label" :value="d.label" />
                    </el-select>
                </el-form-item>
                <el-form-item label="路面类型">
                    <el-select v-model="form.pavementType" placeholder="请选择" clearable style="width: 100%">
                        <el-option v-for="d in RoadTypeOptions" :key="d.value" :label="d.label" :value="d.label" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <BaseButton v-permission="{ btnCode: '' }" @click="handleFilter">查询</BaseButton>
                    <BaseButton type="second" @click="resetConditions">重置</BaseButton>
                </el-form-item>
            </el-form>

            <!--数据列表区-->
            <BaseTable
                slot="table"
                v-loading="listLoading"
                :columns="columns"
                :data="list"
                row-key="id"
                height="500px"
                highlight-current-row
                @selection-change="handleSelectionChange"
            >
            </BaseTable>
            <!--分页组件-->
            <Pagination
                slot="pagination"
                :current-page.sync="page.pageNo"
                :page-size.sync="page.pageSize"
                :total="page.total"
                @current-change="getList"
                @size-change="getList"
            />
        </BasePage>
        <div slot="footer" style="text-align: center">
            <BaseButton type="recond" @click="cancel">取 消</BaseButton>
            <BaseButton :disabled="selectionList.length === 0" :loading="submitLoading" @click="handleSubmit">保 存</BaseButton>
        </div>
    </el-dialog>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { RoadSectionSelectModel } from '@/models'
import { DirectionOptions } from '@/config/constants'
import { RoadTypeOptions, TechnicalIndexOptions, DataRangeOptions, TestTypeOptions } from '@/views/technical-evaluation/constants'

export default {
    name: 'AddOrUpdate',
    components: {
        BasePage
    },
    data() {
        return {
            RoadTypeOptions,
            DirectionOptions,
            DataRangeOptions,
            TechnicalIndexOptions,
            TestTypeOptions,
            model: new RoadSectionSelectModel(),
            visible: false,
            submitLoading: false,
            // 表单参数
            form: {
                detectionBatch: '',
                highwayCode: '',
                orgName: '',
                startStake1: '',
                startStake2: '',
                endStake1: '',
                endStake2: '',
                detectionType: '',
                direction: '',
                pavementType: '',
                indicator: '',
                indicatorRange: '',
                indicatorValue: ''
            },
            datePickerOptions: {
                disabledDate(date) {
                    return date.getFullYear() > new Date().getFullYear()
                }
            },
            current: 1,
            monitoringCenterOptions: [],
            listLoading: true,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: Object.freeze([
                {
                    attrs: {
                        type: 'selection',
                        width: '56'
                    }
                },
                {
                    attrs: {
                        prop: 'detectionBatch',
                        label: '检测批次',
                        width: '140'
                    }
                },
                {
                    attrs: {
                        prop: 'detectionType',
                        label: '检测类型',
                        width: '150'
                    }
                },
                {
                    attrs: {
                        prop: 'highwayCode',
                        label: '公路编码',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'highwayName',
                        label: '公路名称',
                        'show-overflow-tooltip': true,
                        'min-width': '130'
                    }
                },
                {
                    attrs: {
                        prop: 'orgName',
                        label: '管养单位',
                        'show-overflow-tooltip': true,
                        'min-width': '130'
                    }
                },
                {
                    attrs: {
                        prop: 'startStakeNo',
                        label: '起点桩号',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'endStakeNo',
                        label: '终点桩号',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'length',
                        label: '长度（m）',
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'direction',
                        label: '方向',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'lane',
                        label: '车道',
                        'show-overflow-tooltip': true,
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'roadType',
                        label: '技术等级',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'pavementType',
                        label: '路面类型',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'openingTime',
                        label: '通车时间',
                        width: '120'
                    }
                }
            ]),
            selectionList: [],
            paramsData: {}
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            this.setParamsData()
            this.model
                .getUnitList({...this.paramsData, ...this.page})
                .then((res) => {
                    this.list = res.list || []
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        setParamsData() {
            const { startStake1, startStake2, endStake1, endStake2 } = this.form
            const startStakeNo = startStake1 && startStake2 ? `K${startStake1}+${startStake2}` : ''
            const endStakeNo = endStake1 && endStake2 ? `K${endStake1}+${endStake2}` : ''
            this.paramsData = {
                ...this.form,
                startStakeNo,
                endStakeNo
            }
        },
        // 取消按钮
        cancel() {
            this.visible = false
            this.reset()
        },
        open() {
            this.visible = true
            this.reset()
            this.getList()
        },
        // 表单重置
        reset() {
            this.form = {
                detectionBatch: '',
                highwayCode: '',
                orgName: '',
                startStake1: '',
                startStake2: '',
                endStake1: '',
                endStake2: '',
                detectionType: '',
                direction: '',
                pavementType: '',
                indicator: '',
                indicatorRange: '',
                indicatorValue: ''
            }
        },
        handleSubmit() {
            this.submitLoading = true
            const ids = this.selectionList.map((item) => item.id)
            this.model
                .saveUnit({ ids })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '操作成功！',
                        duration: 500,
                        onClose: () => {
                            this.visible = false
                            this.$emit('success')
                        }
                    })
                })
                .finally(() => {
                    this.submitLoading = false
                })
        },
        resetConditions() {
            this.reset()
            this.handleFilter()
        },
        handleSelectionChange(value) {
            this.selectionList = value
        },
        onKeydown(e) {
            if (e.key === 'e' || e.key === '-' || e.code === 'Minus') {
                e.preventDefault()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.filter-stake {
    width: 203px;
    ::v-deep {
        .el-input__inner,
        .el-input {
            min-width: auto !important;
            line-height: 1px !important;
        }
        .el-input-group__append,
        .el-input-group__prepend {
            padding: 0 8px;
            color: #44444f;
        }
    }
    .start-stake {
        position: relative;
        z-index: 1;
        margin-right: -1px;
        ::v-deep {
            .el-input__inner,
            .el-input {
                border-radius: 0;
            }
        }
    }
    .end-stake {
        ::v-deep {
            .el-input-group__append,
            .el-input-group__prepend {
                border-radius: 0;
            }
        }
    }
}
</style>
